<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS3——栅格布局</title>
    <style>
        .content{
            /* 子节点，多列布局 */
            -moz-columns: 100px 2;
            -o-columns:100px 2;
            -ms-columns: 100px 2;
            columns: 100px 2; 
            /*子节点，列间距*/
            column-gap:2em;
            /*子节点，列border样式*/
            column-rule:1px solid gray;
            /* 父层节点 */
            width:500px;
            height:auto;
            min-height: 100px;
            border:1px solid gray;
        }
        .content p{
            background:pink;
        }
        .content p:nth-child(odd){
            column-span: all;
        }
        .box{
            width:100px;
            height:100px;
            background:pink;
            overflow: hidden;
            float:left;
            margin:15px;
        }
        .box1{
            border:5px solid gray;
            box-sizing: border-box;
        }
        .box2{
            padding:15px;
            box-sizing: content-box;
        }
    </style>
</head>
<body>
    <div class="content">
        <h3>这是大标题</h3>
        <div class="col">段落1：为了能在Web页面中方便实现类似报纸、杂志那种多列排版的布局，W3C特意给CSS3增加了一个多列布局模块（CSS Multi Column Layout Module）。它主要应用在文本的多列布局方面。对于文本的多列布局，我想大家并不陌生，因为报纸和杂志上我们随处可见，这种布局在报纸和杂志上都使用了几十年了，但需要在Web页面上实现文本的多列布局，正如下图所示。</div>
        <div class="col">段落2：为了能在Web页面中方便实现类似报纸、杂志那种多列排版的布局</div>
        <p>段落3：abcdefg</p>
        <p>段落4：偶数的p段落column-span: 跨整行</p>
        <p>段落5：abcdefg</p>
    </div>

    <div class="box box1">从border开始算大小，包含border、padding，大小100px</div>
    <div class="box box2">从实际内容开始算大小，不包含border、padding，大小100px</div>
</body>
</html>